<template>
  <div class="project-documentation-container">
    <!-- 搜索框区域 -->
    <div class="search-wrap">
      <div class="search-input-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            shape="round"
            placeholder="搜索项目文档分类名称"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleClear"
          >
          </van-search>
        </form>
      </div>
    </div>

    <!-- 一级文件夹 -->
    <div
      class="content-list-wrap"
      v-if="showOneFolder"
    >
      <ul
        class="content-list-box"
        v-if="oneFolder.length"
      >
        <li
          v-for="(item, index) in oneFolder"
          :key="index"
          class="content-list-item"
          @click="hiddenOneFolder(item)"
        >
          <div class="image-box">
            <img
              src="../../../../assets/images/file-image.png"
              alt=""
            >
          </div>
          <div class="title-box">{{item.name}}</div>
        </li>
      </ul>
      <!-- 无数据 -->
      <div
        class="no-data-box"
        v-if="noDataState"
      >暂无数据</div>
    </div>

    <div
      class="product-list-wrap"
      v-else
    >
      <!-- 面包屑 -->
      <div class="bread-crumbs-wrap">
        <div
          class="bread-crumbs-box"
          v-for="(item, index) in filterArea"
          :key="index"
          @click="changeStep(item.step)"
        >
          <span :class="index !== (filterArea.length - 1) ? 'color-primary' : 'color-deep-gray'">{{ item.name }}</span>
          <van-icon
            name="arrow"
            v-if="index !== (filterArea.length - 1)"
          />
        </div>
      </div>

      <!-- 二级文件夹和一级文件列表 -->
      <div
        class="two-folder-wrap"
        v-if="filterStep === 2"
      >
        <!-- 二级文件夹 -->
        <div class="two-folder-box">
          <ul class="content-list-box">
            <li
              v-for="(item, index) in filterTwoFolder"
              :key="index"
              class="content-list-item"
              @click="hiddenTwoFolder(item)"
            >
              <div class="image-box">
                <img
                  src="../../../../assets/images/file-image.png"
                  alt=""
                >
              </div>
              <div class="title-box">{{item.name}}</div>
            </li>
          </ul>
        </div>
        <!-- 一级文件列表 -->
        <div class="product-list-box">
          <div
            v-for="(item,index) in oneFileList"
            :key="index"
            class="product-list-item"
          >
            <div class="product-item-left">
              <div class="icon-box">
                <i class="iconfont iconxiangmuwendang"></i>
              </div>
            </div>
            <div class="product-item-right">
              <div class="project-name">
                <div class="work-order">{{item.name}}</div>
                <!-- <div
                  class="status-box"
                  v-has="'projectCenter:projectView:projectManage:list:detail:document:list:download'"
                  @click="downloadFile(item)"
                >
                  <i class="iconfont iconxiazai"></i>
                  <span>查看</span>
                </div> -->
              </div>
              <div class="company-name">
                <div>最后操作人：{{item.User.name}}</div>
                <div> 更新日期：{{item.UpdatedAt.split('T')[0]}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 三级文件夹和二级文件列表 -->
      <div
        class="two-folder-wrap"
        v-if="filterStep === 3"
      >
        <!-- 三级文件夹 -->
        <div class="two-folder-box">
          <ul class="content-list-box">
            <li
              v-for="(item, index) in filterThreeFolder"
              :key="index"
              class="content-list-item"
              @click="hiddenThreeFolder(item)"
            >
              <div class="image-box">
                <img
                  src="../../../../assets/images/file-image.png"
                  alt=""
                >
              </div>
              <div class="title-box">{{item.name}}</div>
            </li>
          </ul>
        </div>
        <!-- 二级文件列表 -->
        <div class="product-list-box">
          <div
            v-for="(item,index) in twoFileList"
            :key="index"
            class="product-list-item"
          >
            <div class="product-item-left">
              <div class="icon-box">
                <i class="iconfont iconxiangmuwendang"></i>
              </div>
            </div>
            <div class="product-item-right">
              <div class="project-name">
                <div class="work-order">{{item.name}}</div>
                <!-- <div
                  class="status-box"
                  v-has="'projectCenter:projectView:projectManage:list:detail:document:list:download'"
                  @click="downloadFile(item)"
                >
                  <i class="iconfont iconxiazai"></i>
                  <span>查看</span>
                </div> -->
              </div>
              <div class="company-name">
                <div>最后操作人：{{item.User.name}}</div>
                <div> 更新日期：{{item.UpdatedAt.split('T')[0]}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 三级文件列表 -->
      <div
        class="two-folder-wrap"
        v-if="filterStep === 4"
      >
        <div class="product-list-box">
          <div
            v-for="(item,index) in threeFileList"
            :key="index"
            class="product-list-item"
          >
            <div class="product-item-left">
              <div class="icon-box">
                <i class="iconfont iconxiangmuwendang"></i>
              </div>
            </div>
            <div class="product-item-right">
              <div class="project-name">
                <div class="work-order">{{item.name}}</div>
                <!-- <div
                  class="status-box"
                  v-has="'projectCenter:projectView:projectManage:list:detail:document:list:download'"
                  @click="downloadFile(item)"
                >
                  <i class="iconfont iconxiazai"></i>
                  <span>查看</span>
                </div> -->
              </div>
              <div class="company-name">
                <div>最后操作人：{{item.User.name}}</div>
                <div> 更新日期：{{item.UpdatedAt.split('T')[0]}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { Search } from 'vant';
import { getFolderList, getFileList } from '@/api/projectManage';

export default {
  name: 'ProjectDocumentation',
  props: {
    projectId: Number // 项目id
  },
  components: {
    [Search.name]: Search
  },
  data() {
    return {
      // 搜索相关配置
      searchOptions: {
        searchKey: '',
        handleSearch: this.handleSearch,
        handleClear: this.handleSearch
      },

      showOneFolder: true, // 显示一级文件夹
      oneFolder: [], // 一级文件夹
      oneFolderId: '', // 一级文件夹id
      oneFileList: [], // 一级文件列表

      twoFolder: [], // 二级文件夹
      twoFolderId: '', // 二级文件夹id
      filterTwoFolder: [], // 筛选出来的二级文件夹
      twoFileList: [], // 二级文件列表

      threeFolder: [], // 三级文件夹
      threeFolderId: '', // 三级文件夹id
      threeFileList: [], // 三级文件列表

      filterArea: [
        {
          name: '全部文档',
          step: 1
        }
      ],
      filterStep: 2, // 处于哪一级  2:二级文件夹、3:三级文件夹、4:三级文件列表
      noDataState: false
    };
  },
  created() {
    this.getFolderListEvent();
  },
  methods: {
    // 获取文档列表
    getFolderListEvent() {
      this.oneFolder = [];
      this.twoFolder = [];
      this.threeFolder = [];
      const params = {
        project_id: this.projectId // 项目id
      };
      getFolderList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            if (item.level && item.level === 1) {
              this.oneFolder.push(item);
              this.noDataState = false;
            } else if (item.level && item.level === 2) this.twoFolder.push(item);
            else if (item.level && item.level === 3) this.threeFolder.push(item);
          });
        } else {
          this.oneFolder = [];
          this.noDataState = true;
        }
      });
    },

    // 搜索
    handleSearch() {
      // 判断是否在一级文件夹？
      if (this.showOneFolder) {
        if (this.searchOptions.searchKey) {
          const temp = [];
          this.oneFolder.map(item => {
            if (item.name.includes(this.searchOptions.searchKey)) temp.push(item);
          });
          if (temp.length) this.noDataState = false;
          else this.noDataState = true;
          this.oneFolder = temp;
        } else {
          this.getFolderListEvent();
        }
      } else {
        if (this.filterStep === 2) {
          if (this.searchOptions.searchKey) {
            // 筛选二级文件夹
            const temp = [];
            this.filterTwoFolder.map(item => {
              if (item.name.includes(this.searchOptions.searchKey)) temp.push(item);
            });
            this.filterTwoFolder = temp;
            // 筛选一级文件列表
            const temp2 = [];
            this.oneFileList.map(item => {
              if (item.name.includes(this.searchOptions.searchKey)) temp2.push(item);
            });
            this.oneFileList = temp2;
          } else {
            this.twoFolder = [];
            this.oneFileList = [];
            const params = {
              project_id: this.projectId // 项目id
            };
            getFolderList(params)
              .then(res => {
                if (res.data.list && res.data.list.length) {
                  res.data.list.map(item => {
                    if (item.level === 2) this.twoFolder.push(item);
                  });
                }
              })
              .then(res => {
                this.filterTwoFolder = this.twoFolder.filter(subItem => {
                  return this.oneFolderId === subItem.pid;
                });
              });
            const para = {
              folder_id: this.oneFolderId, // 文件夹id
              project_id: this.projectId // 项目id
            };
            getFileList(para).then(res => {
              if (res.data.list && res.data.list.length) {
                this.oneFileList = res.data.list;
              }
            });
          }
        } else if (this.filterStep === 3) {
          if (this.searchOptions.searchKey) {
            const temp = [];
            this.filterThreeFolder.map(item => {
              if (item.name.includes(this.searchOptions.searchKey)) temp.push(item);
            });
            this.filterThreeFolder = temp;
            const temp2 = [];
            this.twoFileList.map(item => {
              if (item.name.includes(this.searchOptions.searchKey)) temp2.push(item);
            });
            this.twoFileList = temp2;
          } else {
            this.threeFolder = [];
            this.twoFileList = [];
            const params = {
              project_id: this.projectId // 项目id
            };
            getFolderList(params)
              .then(res => {
                if (res.data.list && res.data.list.length) {
                  res.data.list.map(item => {
                    if (item.level === 3) this.threeFolder.push(item);
                  });
                }
              })
              .then(res => {
                this.filterThreeFolder = this.threeFolder.filter(subItem => {
                  return this.twoFolderId === subItem.pid;
                });
              });
            const para = {
              folder_id: this.twoFolderId, // 文件夹id
              project_id: this.projectId // 项目id
            };
            getFileList(para).then(res => {
              if (res.data.list && res.data.list.length) {
                this.twoFileList = res.data.list;
              }
            });
          }
        } else if (this.filterStep === 4) {
          if (this.searchOptions.searchKey) {
            const temp = [];
            this.threeFileList.map(item => {
              if (item.name.includes(this.searchOptions.searchKey)) temp.push(item);
            });
            this.threeFileList = temp;
          } else {
            this.threeFileList = [];
            const params = {
              folder_id: this.threeFolderId, // 文件夹id
              project_id: this.projectId // 项目id
            };
            getFileList(params).then(res => {
              if (res.data.list && res.data.list.length) {
                this.threeFileList = res.data.list;
              }
            });
          }
        }
      }
    },

    // 面包屑的切换
    changeStep(step) {
      if (step === 1) {
        this.searchOptions.searchKey = '';
        this.showOneFolder = true;
        this.oneFileList = [];
        this.filterArea.length = step;
      } else if (step === 2) {
        this.searchOptions.searchKey = '';
        this.twoFileList = [];
        this.filterStep = step;
        this.filterArea.length = step;
      } else if (step === 3) {
        this.searchOptions.searchKey = '';
        this.threeFileList = [];
        this.filterStep = step;
        this.filterArea.length = step;
      }
    },

    // 隐藏一级文件夹
    hiddenOneFolder(item) {
      this.filterArea.push({
        name: item.name,
        step: 2
      });
      // 筛选二级文件夹
      this.filterTwoFolder = this.twoFolder.filter(subItem => {
        return item.ID === subItem.pid;
      });
      const params = {
        folder_id: item.ID, // 文件夹id
        project_id: this.projectId // 项目id
      };
      getFileList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          this.oneFileList = res.data.list;
        }
      });
      this.showOneFolder = false;
      this.filterStep = 2;
      this.oneFolderId = item.ID;
    },
    // 隐藏二级文件夹
    hiddenTwoFolder(item) {
      this.filterArea.push({
        name: item.name,
        step: 3
      });
      // 筛选三级文件夹
      this.filterThreeFolder = this.threeFolder.filter(subItem => {
        return item.ID === subItem.pid;
      });
      const params = {
        folder_id: item.ID, // 文件夹id
        project_id: this.projectId // 项目id
      };
      getFileList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          this.twoFileList = res.data.list;
        }
      });
      this.filterStep = 3;
      this.twoFolderId = item.ID;
    },
    // 隐藏三级文件夹
    hiddenThreeFolder(item) {
      this.filterArea.push({
        name: item.name,
        step: 4
      });
      const params = {
        folder_id: item.ID, // 文件夹id
        project_id: this.projectId // 项目id
      };
      getFileList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          this.threeFileList = res.data.list;
        }
      });
      this.filterStep = 4;
      this.threeFolderId = item.ID;
    },

    // 查看文件
    downloadFile(row) {
      const fileType = ['.xls', '.xlsx', '.jpeg', '.png', '.jpg', '.zip'];
      let fileName = row.name;
      const path = row.file_path;

      let endStr = '';
      let need = true;
      fileType.forEach(item => {
        if (fileName.endsWith(item)) need = false;
        if (path.endsWith(item)) endStr = item;
      });
      if (need) {
        fileName += endStr;
      }
      this.$router.push({ name: 'iframe', query: { path } });
      // let link = document.createElement('a');
      // link.href = path;
      // link.download = fileName;
      // link.click();
      // window.URL.revokeObjectURL(link.href);
    }
  }
};
</script>

<style lang="scss" scoped>
.project-documentation-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // 搜索框区域
  .search-wrap {
    background-color: #ffffff;
    .search-input-box {
      height: 1.6rem;
      padding-right: 0.16rem;
      .van-search {
        height: 100%;
      }
    }
  }

  // 内容列表区域
  .content-list-wrap {
    flex: 1;
    height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .content-list-box {
      display: grid;
      grid-template-columns: repeat(auto-fill, 4.666667rem);
      grid-column-gap: 0.213333rem;
      grid-row-gap: 0.213333rem;
      padding: 0.213333rem;

      .content-list-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 2.8rem;
        background-color: #ffffff;
        border-radius: 0.106667rem;
        .image-box {
          width: 0.906667rem;
          height: 0.8rem;
          margin-bottom: 0.4rem;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // 文件列表
  .product-list-wrap {
    flex: 1;
    height: 0;
    // 面包屑
    .bread-crumbs-wrap {
      display: flex;
      align-items: center;
      height: 0.8rem;
      line-height: 0.8rem;
      padding: 0 0.4rem;
      color: #999999;
      font-size: 0.32rem;
      .bread-crumbs-box {
        display: flex;
        align-items: center;
        .van-icon {
          margin: 0 0.16rem;
          color: #cccccc;
        }
      }
    }
    // 二级文件夹和一级文件列表
    .two-folder-wrap {
      // 二级文件夹
      .two-folder-box {
        .content-list-box {
          display: grid;
          grid-template-columns: repeat(auto-fill, 4.666667rem);
          grid-column-gap: 0.213333rem;
          grid-row-gap: 0.213333rem;
          padding: 0.213333rem;

          .content-list-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 2.8rem;
            background-color: #ffffff;
            border-radius: 0.106667rem;
            .image-box {
              width: 0.906667rem;
              height: 0.8rem;
              margin-bottom: 0.4rem;
              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      // 一级文件列表
      .product-list-box {
        background-color: #ffffff;
        padding: 0 0.4rem;
        .product-list-item {
          display: flex;
          align-items: center;
          height: 1.866667rem;
          border-bottom: 1px solid #f2f6fc;
          .product-item-left {
            margin-right: 0.213333rem;
            .icon-box {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 1.12rem;
              height: 1.12rem;
              border: 1px solid #ccddff;
              border-radius: 50%;
              i {
                color: #85aeff;
                font-size: 0.533333rem;
              }
            }
          }
          .product-item-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0.08rem 0;
            .project-name {
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #333333;
              font-size: 0.426667rem;
              margin-bottom: 0.32rem;
              .status-box {
                display: flex;
                align-items: center;
                color: #3378ff;
                font-size: 0.32rem;
                span {
                  margin-left: 0.053333rem;
                }
              }
            }
            .company-name {
              display: flex;
              justify-content: space-between;
              color: #999999;
              font-size: 0.266667rem;
            }
          }
        }
      }
    }
  }
}
</style>